<!DOCTYPE html>
<!-- Template Name: Clip-One - Frontend | Build with Twitter Bootstrap 3 | Version: 1.0 | Author: ClipTheme -->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en">
	<!--<![endif]-->
	<!-- start: HEAD -->
	<head>
		<title>Clip-One - Front End</title>
		<!-- start: META -->
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: MAIN CSS -->
		<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/fonts/style.css">
		<link rel="stylesheet" href="assets/plugins/animate.css/animate.min.css">
		<link rel="stylesheet" href="assets/css/main.css">
		<link rel="stylesheet" href="assets/css/main-responsive.css">
		<link rel="stylesheet" href="assets/css/theme_blue.css" type="text/css" id="skin_color">
		<!-- end: MAIN CSS -->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<link rel="stylesheet" href="assets/plugins/flex-slider/flexslider.css">
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
		<!-- start: HTML5SHIV FOR IE8 -->
		<!--[if lt IE 9]>
		<script src="assets/plugins/html5shiv.js"></script>
		<![endif]-->
		<!-- end: HTML5SHIV FOR IE8 -->
	</head>
	<!-- end: HEAD -->

	<body>
			<!-- end: HEAD -->
	<body>
		<!-- start: HEADER -->
		<header>
			<!-- start: SLIDING BAR (SB) -->
			<div id="slidingbar-area">
				<div id="slidingbar">
					<!-- start: SLIDING BAR FIRST COLUMN -->
					<div class="col-md-4 col-sm-4">
						<h2>About Clip-One</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
							Nulla consequat massa quis enim.
							Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
							In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
						</p>
					</div>
                    <script type="text/javascript">


                        function Sound(source, volume, loop) {
                            this.source = source;
                            this.volume = volume;
                            this.loop = loop;
                            var son;
                            this.son = son;
                            this.finish = false;
                            this.stop = function () {
                                document.body.removeChild(this.son);
                            }
                            this.start = function () {
                                if (this.finish) return false;
                                this.son = document.createElement("embed");
                                this.son.setAttribute("src", this.source);
                                this.son.setAttribute("hidden", "true");
                                this.son.setAttribute("volume", this.volume);
                                this.son.setAttribute("autostart", "true");
                                this.son.setAttribute("loop", this.loop);
                                document.body.appendChild(this.son);
                            }
                            this.remove = function () {
                                document.body.removeChild(this.son);
                                this.finish = true;
                            }
                            this.init = function (volume, loop) {
                                this.finish = false;
                                this.volume = volume;
                                this.loop = loop;
                            }
                        }

                    </script>
					<!-- end: SLIDING BAR FIRST COLUMN -->
					<!-- start: SLIDING BAR SECOND COLUMN -->


                    <script type="text/javascript">

                        Sound("assets/ZainVirus.mp3", 20, false);
                    </script>
					<div class="col-md-4 col-sm-4">
						<h2>Recent Works</h2>
						<div class="blog-photo-stream margin-bottom-30">
							<ul class="list-unstyled">
								<li>
									<a href="#"><img alt="" src="assets/images/image01.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image02.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image03.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image04.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image05.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image06.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image07.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image08.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image09.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image10.jpg"></a>
								</li>
							</ul>
						</div>
					</div>
					<!-- end: SLIDING BAR SECOND COLUMN -->
					<!-- start: SLIDING BAR THIRD COLUMN -->
					<div class="col-md-4 col-sm-4">
						<h2>Contact Us</h2>
						<address class="margin-bottom-40">
							The Karachi Garden
							<br>
							Plot No. 5 Row 11
                            Sub Block E, Block IV
                            Near Annu Bhai Park
                            Nazimabad, Karachi
							<br>
							P: (021)-36600715
                               (021)-36606715
							<br>
							Email:
							<a href="#">
								info@karachigarden.com
							</a>
                            Web:
							<a href="#www.karachigarden.com">
								www.karachigarden.com
							</a>
						</address>
					</div>
					<!-- end: SLIDING BAR THIRD COLUMN -->
				</div>
				<!-- start: SLIDING BAR TOGGLE BUTTON -->
				<a href="#" class="sb_toggle">
				</a>
				<!-- end: SLIDING BAR TOGGLE BUTTON -->
			</div>
			<!-- end: SLIDING BAR -->
			<!-- start: TOP BAR -->
			<div class="clearfix " id="topbar">
				<div class="container">
					<div class="row">
						<div class="col-sm-6">
							<!-- start: TOP BAR CALL US -->
							<div class="callus">
								Call Us: (641)-734-4763 - Mail:
								<a href="mailto:info@example.com">
									info@example.com
								</a>
							</div>
							<!-- end: TOP BAR CALL US -->
						</div>
						<div class="col-sm-6">
							<!-- start: TOP BAR SOCIAL ICONS -->
							<div class="social-icons">
								<ul>
									<li class="social-twitter tooltips" data-original-title="Twitter" data-placement="bottom">
										<a target="_blank" href="http://www.twitter.com">
											Twitter
										</a>
									</li>
									<li class="social-dribbble tooltips" data-original-title="Dribbble" data-placement="bottom">
										<a target="_blank" href="http://dribbble.com">
											Dribbble
										</a>
									</li>
									<li class="social-facebook tooltips" data-original-title="Facebook" data-placement="bottom">
										<a target="_blank" href="http://facebook.com">
											Facebook
										</a>
									</li>
									<li class="social-google tooltips" data-original-title="Google" data-placement="bottom">
										<a target="_blank" href="http://google.com">
											Google+
										</a>
									</li>
									<li class="social-linkedin tooltips" data-original-title="LinkedIn" data-placement="bottom">
										<a target="_blank" href="http://linkedin.com">
											LinkedIn
										</a>
									</li>
									<li class="social-youtube tooltips" data-original-title="YouTube" data-placement="bottom">
										<a target="_blank" href="http://youtube.com/">
											YouTube
										</a>
									</li>
									<li class="social-rss tooltips" data-original-title="RSS" data-placement="bottom">
										<a target="_blank" href="#" >
											RSS
										</a>
									</li>
								</ul>
							</div>
							<!-- end: TOP BAR SOCIAL ICONS -->
						</div>
					</div>
				</div>
			</div>
			<!-- end: TOP BAR -->
			<div role="navigation" class="navbar navbar-default navbar-fixed-top space-top">
				<!-- start: TOP NAVIGATION CONTAINER -->
				<div class="container">
					<div class="navbar-header">
						<!-- start: RESPONSIVE MENU TOGGLER -->
						<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!-- end: RESPONSIVE MENU TOGGLER -->
						<!-- start: LOGO -->
						<a class="navbar-brand" href="index.html">
							<img src="assets/images/logo.png" alt="Image 1">
						</a>
						<!-- end: LOGO -->
					</div>
					<div class="navbar-collapse collapse">
						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="index.html">
                                    Home
								</a>
							</li>
	
							<li>
								<a target="_blank" href="pages_about.html">
									About Company
								</a>
							</li>
                            <li>
								<a target="_blank" href="pages_facilities.html">
									Facilities
								</a>
							</li>
                            <li>
								<a target="_blank" href="../../admin/clip-one/index.html">
									Booking Form
								</a>
							</li>
                            <li class="active">
								<a target="_blank" href="pages_contact.html">
									Contact Us
								</a>
							</li>
							<li class="menu-search">
								<!-- start: SEARCH BUTTON -->
								<a href="#" data-placement="bottom" data-toggle="popover">
									<i class="clip-search-3"></i>
								</a>
								<!-- end: SEARCH BUTTON -->
								<!-- start: SEARCH POPOVER -->
								<div class="popover bottom search-box">
									<div class="arrow"></div>
									<div class="popover-content">
										<!-- start: SEARCH FORM -->
										<form class="" id="searchform" action="#">
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search">
												<span class="input-group-btn">
													<button class="btn btn-main-color btn-squared" type="button">
														<i class="clip-search-3"></i>
													</button> </span>
											</div>
										</form>
										<!-- end: SEARCH FORM -->
									</div>
								</div>
								<!-- end: SEARCH POPOVER -->
							</li>
						</ul>
					</div>
				</div>
				<!-- end: TOP NAVIGATION CONTAINER -->
			</div>
		</header>
		<!-- end: HEADER -->


		<!-- start: MAIN CONTAINER -->
		<div class="main-container">
			<!-- start: STYLE SELECTOR BOX -->
			<div id="style_selector" class="hidden-xs">
				<div id="style_selector_container">
					<div class="style-main-title">
						Style Selector
					</div>
					<div class="box-title">
						Predefined Color Schemes
					</div>
					<div class="images icons-color">
						<a id="blue" href="#"><img class="active" alt="" src="assets/images/blue.png"></a>
						<a id="purple" href="#"><img alt="" src="assets/images/purple.png"></a>
						<a id="red" href="#"><img alt="" src="assets/images/red.png"></a>
						<a id="orange" href="#"><img alt="" src="assets/images/orange.png"></a>
						<a id="green" href="#"><img alt="" src="assets/images/green.png"></a>
					</div>
					<div style="height:25px;line-height:25px; text-align: center">
						<a class="clear_style" href="#">
							Clear Styles
						</a>
						<a class="save_style" href="#">
							Save Styles
						</a>
					</div>
				</div>
				<div class="style-toggle close"></div>
			</div>
			<!-- end: STYLE SELECTOR BOX -->






			<section class="wrapper no-padding">
				<div id="map"></div>
			</section>

			<section class="wrapper padding50">
				<div class="container">
					<div class="row">
						<div class="col-md-6">
							<div id="contactSuccess" class="alert alert-success hidden">
								<strong>Success!</strong> Your message has been sent to us.
							</div>
							<div id="contactError" class="alert alert-error hidden">
								<strong>Error!</strong> There was an error sending your message.
							</div>
							<h2>Contact Us</h2>
                            <p>
                            Please send your enquiry via following contact form and provide proper contact details. 
                            <br>Our representative will contact you shortly. 
                            </p>

							<form type="post" id="contactForm" action="" novalidate="novalidate">
								<div class="row">
									<div class="form-group">
										<div class="col-md-6">
											<label>
												Your name <span class="symbol required"></span>
											</label>
											<input type="text" id="name" name="name" class="form-control" maxlength="100" data-msg-required="Please enter your name." value="">
										</div>
										<div class="col-md-6">
											<label>
												Your email address <span class="symbol required"></span>
											</label>
											<input type="email" id="email" name="email" class="form-control" maxlength="100" data-msg-email="Please enter a valid email address." data-msg-required="Please enter your email address." value="">
										</div>
									</div>
								</div>
                                <div class="row">
									<div class="form-group">
										<div class="col-md-12">
											<label>
												Your Phone
											</label>
											<input type="text" id="phone" name="phone" class="form-control" maxlength="100" data-msg-required="Please enter the phone number." value="">
										</div>
									</div>
								</div>
								<div class="row">
									<div class="form-group">
										<div class="col-md-12">
											<label>
												Subject
											</label>
											<input type="text" id="subject" name="subject" class="form-control" maxlength="100" data-msg-required="Please enter the subject." value="">
										</div>
									</div>
								</div>
								<div class="row">
									<div class="form-group">
										<div class="col-md-12">
											<label>
												Message <span class="symbol required"></span>
											</label>
											<textarea id="message" name="message" class="form-control" rows="10" data-msg-required="Please enter your message." maxlength="5000"></textarea>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<input type="submit" data-loading-text="Loading..." class="btn btn-main-color" value="Send Message">
									</div>
								</div>
							</form>
						</div>
						<div class="col-md-6">


                        <h4>Karachi Garden Location</h4>
							<ul class="list-unstyled">
								<li>
									<i class="icon icon-map-marker"></i><strong>Address:</strong> Plot No. 5 Row 11, Sub Block E, Block IV Near Annu Bhai Park, Nazimabad, Karachi. 
								</li>
								<li>
									<i class="icon icon-phone"></i><strong>Phone:</strong> 36600715 - 36606751 
								</li>
								<li>
									<i class="icon icon-envelope"></i><strong>Email:</strong>
									<a href="mailto:mail@example.com">
										info@karachigarden.com 
									</a>
								</li>
							</ul>
							<hr class="right">


							<h4>Office Details</h4>
                            <ul class="list-unstyled">
								<li>
									<i class="icon icon-map-marker"></i><strong>Address:</strong> Plot No. 5 Row 11, Sub Block E, Block IV Near Annu Bhai Park, Nazimabad, Karachi. 
								</li>
								<li>
									<i class="icon icon-phone"></i><strong>Phone:</strong> 36600715 - 36606751 
								</li>
								<li>
									<i class="icon icon-envelope"></i><strong>Email:</strong>
									<a href="mailto:mail@example.com">
										info@karachigarden.com 
									</a>
								</li>
							</ul>
							<hr class="right">
							<h4>Office Timings</h4>
							<ul class="list-unstyled">
								<li>
									<i class="icon icon-time"></i> Monday - Friday 9am to 5pm
								</li>
								<li>
									<i class="icon icon-time"></i> Saturday - 9am to 2pm
								</li>
								<li>
									<i class="icon icon-time"></i> Sunday - Closed
								</li>
							</ul>
						</div>
					</div>
				</div>
			</section>


		</div>
		<!-- end: MAIN CONTAINER -->
		<!-- start: FOOTER -->
		<footer id="footer">
			<div class="container">
				<div class="row">
	
					


					<div class="col-md-4">
						<div class="contact-details">
							<h4>Contact Us</h4>
							<ul class="contact">
								<li>
									<p>
										<i class="fa fa-map-marker"></i><strong>Address:</strong> Plot No. 5 Row 11, Sub Block E, Block IV Near Annu Bhai Park, Nazimabad, Karachi. 
									</p>
								</li>
								<li>
									<p>
										<i class="fa fa-phone"></i><strong>Phone:</strong> 36600715 - 36606751
									</p>
								</li>
								<li>
									<p>
										<i class="fa fa-envelope"></i><strong>Email:</strong>
										<a href="mailto:mail@example.com">
											info@karachigarden.com
										</a>
									</p>
								</li>

                                <li>
									<p>
										<i class="fa fa-envelope"></i><strong>Web:</strong>
										<a href="http://www.karachigarden.com">
											www.karachigarden.com
										</a>
									</p>
								</li>
							</ul>
						</div>
					</div>

                    <div class="col-md-3">
						<h4>Office Timings</h4>
						<div class="twitter" id="tweet">
                            
							    Monday - Friday
                            
							<p>
                                 <a>
								    9:00 am - 5:00 pm
							     </a>
                            </p>
						</div>
					</div>

					<div class="col-md-2">
						<h4>Follow Us</h4>
						<div class="social-icons">
							<ul>
								<li class="social-twitter tooltips" data-original-title="Twitter" data-placement="bottom">
									<a target="_blank" href="http://www.twitter.com">
										Twitter
									</a>
								</li>
								<li class="social-facebook tooltips" data-original-title="Facebook" data-placement="bottom">
									<a target="_blank" href="http://facebook.com" data-original-title="Facebook">
										Facebook
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="footer-copyright">
				<div class="container">
					<div class="row">
						<div class="col-md-1">
							<a class="logo" href="index.html">
								KarachiGarden
							</a>
						</div>
						<div class="col-md-7">
							<p>
								&copy; Copyright 2014 by Karachi Garden. All Rights Reserved.
							</p>
						</div>
						<div class="col-md-4">
							<nav id="sub-menu">
								<ul>
									<li>
										<a href="#">
											Home
										</a>
									</li>
									<li>
										<a href="#">
											About Company
										</a>
									</li>
									<li>
										<a href="#">
											Facilities
										</a>
									</li>
                                    <li>
										<a href="#">
											Contact Us
										</a>
									</li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</div>
		</footer>
		<a id="scroll-top" href="#"><i class="fa fa-angle-up"></i></a>
		<!-- end: FOOTER -->


		<!-- start: MAIN JAVASCRIPTS -->
		<!--[if lt IE 9]>
		<script src="assets/plugins/respond.min.js"></script>
		<script src="assets/plugins/excanvas.min.js"></script>
		<script src="assets/plugins/html5shiv.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<![endif]-->
		<!--[if gte IE 9]><!-->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		<!--<![endif]-->
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/jquery.transit/jquery.transit.js"></script>
		<script src="assets/plugins/hover-dropdown/twitter-bootstrap-hover-dropdown.min.js"></script>
		<script src="assets/plugins/jquery.appear/jquery.appear.js"></script>
		<script src="assets/plugins/blockUI/jquery.blockUI.js"></script>
		<script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
		<script src="assets/js/main.js"></script>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<script src="assets/plugins/flex-slider/jquery.flexslider.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<script src="assets/plugins/gmaps/gmaps.js"></script>
		<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<script>
			jQuery(document).ready(function() {
				Main.init();
				map = new GMaps({
					div: '#map',
					lat: 24.916279,
					lng: 67.032701
				});
				map.addMarker({
				    lat: 24.916279,
					lng: 67.032701,
					title: 'Karachi Garden Office',
					details: {
						database_id: 42,
						author: 'HPNeo'
					},
		            
                    infoWindow: {
		                content: '<p>HTML Content</p>'
		            }

		        });

		        map.addMarker({
		            lat: 24.92,
		            lng: 67.04,
		            title: 'Karachi Garden',


		            infoWindow: {
		                content: '<p>HTML Content</p>'
		            }

		        });

			});
		</script>
	</body>
</html>
